<template>
  <div style="background-color: white;padding-left: 10px;padding-top: 10px;width: auto">
    <el-tag type="danger" style="height: 42px;width: 100px">我的资产</el-tag>
<!--  </div>-->
<!--  <div style="background-color: white">-->
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="90px"
             size="default" @submit.prevent>
      <el-row style="margin-left: 20px;margin-top: 20px">
        <el-col :span="5" class="grid-cell">
          <el-form-item label="物品名称：" prop="name" class="label-right-align">
            <el-input v-model="search.name" type="text" clearable @input="cha"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    <div >
        <div class="static-content-item">
          <el-divider direction="horizontal">个人资产记录</el-divider>
        </div>
      <div style="height: 480px">
        <el-table :data="tableData" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"  style="width: 100%">

          <el-table-column label="编号" prop="id" width="55" v-if="show" type="index"/>
<!--          <el-table-column label="流程编号" prop="" > </el-table-column>-->
          <el-table-column label="使用人">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top">
                <template #default>
                  <p>姓名: {{ scope.row.empName }}</p>
                  <p>所在部门: {{ scope.row.deptName }}</p>
                </template>
                <template #reference>
                  <div class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.empName }}</el-tag>
                  </div>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="物品名称" prop="gsname"> </el-table-column>
          <el-table-column label="物品规格" prop="spec"> </el-table-column>
          <el-table-column label="数量" prop="num"> </el-table-column>
          <el-table-column label="物品总金额">
            <template #default="e">
              <i class="el-icon-time"></i>
              <span>{{ e.row.unitPrice*e.row.num}}</span> 元
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    </el-form>
  </div>


</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance
}
  from 'vue'
import {selectMyGsPy} from "../../../network/adm/MyProperty";
export default defineComponent({
  data() {
    return {
      show:true,
      search:{
        name:null
      },
      currentPage4: 4,
      tableData: [],
    }
  },

  methods: {
    selectMyGsPy(){
      let params={
        //获得当前登录者的id
        userId: this.$store.state.loginUser.id,
        name:this.search.name
      }
      selectMyGsPy(params).then(data=>{
        this.tableData=data.data;
        console.log('表信息',this.tableData)
      })

    },
    //搜索
    cha(){
      this.selectMyGsPy()
    },







    //根据当前状态改变颜色
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
  },
  created() {
    this.selectMyGsPy();
  },
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        input92605: "",
      },
      rules: {},
    })
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    }
    const resetForm = () => {
      instance.ctx.$refs['vForm'].resetFields()
    }
    return {
      ...toRefs(state),
      submitForm,
      resetForm
    }

  }
})

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>